<template>
  <div>
    <NavBar brand-align="left">
      <template v-slot:brand>
        <Nav @click="goIndex">
          <img src="@/assets/logo.png" alt="brand" class="brand">
        </Nav>
      </template>
      <template v-slot:left>
        <Nav :selected="true">选中</Nav>
        <Nav>普通nav</Nav>
        <DropdownMenu>
          <template v-slot:default="{ isExpaned }">
            <Nav :selected="isExpaned">下拉菜单<i class="dropdown-icon iconfont iconsort-down" /></Nav>
          </template>
          <template v-slot:collapse>
            <DropdownList>
              <DropdownItem v-for="item in 5" :key="item" @click="consoleLog('菜单选项' + item)">
                菜单选项{{ item }}
              </DropdownItem>
            </DropdownList>
          </template>
        </DropdownMenu>
        <Nav>
          <my-input v-model="keyword" placeholder="请输入关键字" />
          <div class="block-5" />
          <my-button>搜索</my-button>
        </Nav>
      </template>
      <template v-slot:right>
        <DropdownMenu>
          <template v-slot:default="{ isExpaned }">
            <Nav :selected="isExpaned">我的收藏<i class="dropdown-icon iconfont iconsort-down" /></Nav>
          </template>
          <template v-slot:collapse>
            <DropdownList>
              <DropdownItem href="https://www.bilibili.com/" target="_blank" >bilibili</DropdownItem>
              <DropdownItem href="https://cn.vuejs.org/" target="_blank" >vue.js</DropdownItem>
              <NavDivider />
              <DropdownItem href="https://fanyi.baidu.com/?aldtype=16047#auto/zh" target="_blank" >百度翻译</DropdownItem>
            </DropdownList>
          </template>
        </DropdownMenu>
        <Nav href="https://www.baidu.com/" target="_blank">百度一下</Nav>
        <Nav >退出</Nav>
      </template>
    </NavBar>

    <p style="text-align: center">按着bootstrap的导航栏做的</p>

  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator'
// import { NavBar, Nav, NavDivider } from '@/components/Navbar'
// import { DropdownMenu, DropdownList, DropdownItem } from '@/components/DropdownMenu'
// import MyInput from '@/components/Input'
// import MyButton from '@/components/Button'

import { NavBar, Nav, NavDivider, DropdownMenu, DropdownList, DropdownItem, Input as MyInput, Button as MyButton } from 'alcyh'

@Component({
  name: 'NavBarPage',
  components: {
    NavBar,
    Nav,
    NavDivider,
    DropdownMenu,
    DropdownList,
    DropdownItem,
    MyInput,
    MyButton,
  },
})
export default class extends Vue {
  private keyword = ''

  @Watch('keyword')
  keywordChange() {
    console.log(this.keyword)
  }

  consoleLog(msg: string) {
    console.log(msg)
  }

  goIndex() {
    this.$router.push({ name: 'Home' })
  }
}
</script>

<style>
.brand {
  width: 25px;
  height: 25px;
}

.dropdown-icon {
  font-size: 12px;
  margin-left: 5px;
}
</style>
